<template>
	<view class="container">
		<!-- 空白页 -->
		<!-- <view v-if="empty===true" class="empty">
			<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
			<view v-if="hasLogin" class="empty-tips">
				空空如也
				<navigator class="navigator" url="/pages/index/index" open-type="switchTab">去管理首页>
				</navigator>
			</view>
		</view> -->

		<!-- <!-- 列表 -->
		<!-- <view class="goods-list">
				<block v-for="(item, index) in goodsList" :key="item.spu.id">
					<view class="goods-item" :class="{'b-b': index!==goodsList.length-1}">
						<view class="image-wrapper">
							<image :src="item.image" :class="[item.loaded]" mode="aspectFill" lazy-load
								@load="onImageLoad('goodsList', index)" @error="onImageError('goodsList', index)"></image>
						</view>
						<view class="item-right">
							<text class="clamp title">{{item.categoryName}}</text>
							<text class="attr">{{item.attr_val}}</text>
							<text class="price">¥{{item.price}}</text>
							<text class="goodsNum">剩余{{num}}件</text>
						</view>
						<text class="del-btn yticon" @click="deleteIt(index)">删除该商品</text>
					</view>
				</block>
			</view> --> 

		<view class="guess-section">
			<view v-for="(item, index) in goodsList" :key="index" class="guess-item">
				<view class="image-wrapper">
					<image :src="'http://localhost:8081'+item.picPath" mode="aspectFill"></image>
				</view>
				<text class="title clamp">{{item.spu.goodsName}}</text>
				<text class="price">￥{{item.spu.lowPrice}}</text>
				<text class="del-btn yticon" @click="deleteIt(item.spu.id)">删除该商品</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import uniNumberBox from '@/components/uni-number-box.vue'
	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				total: 0, //总价格
				allChecked: false, //全选状态  true|false
				empty: false, //空白页现实  true|false
				goodsList: [],
				num: 0,
			};
		},
		onLoad() {
			this.loadData();
		},
		watch: {
			//显示空白页
			goodsList(e) {
				let empty = e.length === 0 ? true : false;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			//请求数据
			async loadData() {
				uni.request({
					//url: 'http://10.128.140.224:8080/user/page/',
					url: 'http://localhost:8081/merchant/spu/selectSpuByShop',
					method: 'GET',
					data: {
						shopId: 2
					},
					success: res => {
						// this.name = res.data.name;
						// this.price = res.data.price;
						// this.imgList = res.data.imgList;


						console.log("Succuessfully connected!");
						console.log(JSON.stringify(res.data));
						// that.specList = res.data.specOfSpu;
						// that.specList = JSON.parse(JSON.stringify(res.data.specOfSpu));
						//   	that.specChildList = JSON.parse(JSON.stringify(res.data.specValues));
						this.goodsList = res.data;
						//console.log(res);




					}
				})
			},
			//监听image加载完成
			onImageLoad(key, index) {
				this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(key, index) {
				this[key][index].image = '/static/errorImage.jpg';
			},
			navToLogin() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},

			//数量
			numberChange(data) {
				this.goodsList[data.index].number = data.number;

			},
			// deleteIt(index) {
			// 	let that = this;


			// 	uni.showModal({
			// 		title: '警告',
			// 		content: '删除该商品？',
			// 		success: function(res) {

			// 			if (res.confirm) {
			// 				that.deleteCartItem(index);
			// 			} else if (res.cancel) {
			// 				console.log('用户点击取消');
			// 			}
			// 		}
			// 	});
			// },
			//删除
			deleteIt(index) {

				let id = index;

				uni.showModal({
					content: "删除的是 " + id
				})
				uni.request({
					//url: 'http://10.128.140.224:8080/user/page/',
					url: 'http://localhost:8081/merchant/spu/deleteSpu',
					method: 'GET',
					data: {
						spuId: id,
					},
					success: res => {
						// this.name = res.data.name;
						// this.price = res.data.price;
						// this.imgList = res.data.imgList;


						console.log("Succuessfully connected!");
						console.log(JSON.stringify(res.data));
						// that.specList = res.data.specOfSpu;
						// that.specList = JSON.parse(JSON.stringify(res.data.specOfSpu));
						//   	that.specChildList = JSON.parse(JSON.stringify(res.data.specValues));

						//console.log(res);




					}
				})
				this.goodsList.splice(index, 1);
				this.calcTotal();
				uni.hideLoading();
			},


			//创建订单
			createOrder() {
				let list = this.goodsList;
				let goodsData = [];
				list.forEach(item => {
					if (item.checked) {
						goodsData.push({
							attr_val: item.attr_val,
							number: item.number
						})
					}
				})

				uni.navigateTo({
					url: `/pages/order/createOrder?data=${JSON.stringify({
						goodsData: goodsData
					})}`
				})
				this.$api.msg('跳转下一页 sendData');
			}
		}
	}
</script>

<style lang='scss'>
	.container {
		padding-bottom: 134upx;

		/* 空白页 */
		.empty {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			padding-bottom: 100upx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;

			image {
				width: 240upx;
				height: 160upx;
				margin-bottom: 30upx;
			}

			.empty-tips {
				display: flex;
				font-size: $font-sm+2upx;
				color: $font-color-disabled;

				.navigator {
					color: $uni-color-primary;
					margin-left: 16upx;
				}
			}
		}
	}

	
	/* 猜你喜欢 */
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: #fff;
		.guess-item{
			display:flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80upx;
		}
		.price{
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
		}
	
		.del-btn {
			padding: 4upx 10upx;
			font-size: 34upx;
			height: 50upx;
			color: #ff1d1d;

		}
	}
</style>
